import React, { useEffect, useRef, useState } from 'react'
import { Button, Table, Modal, Switch, message } from 'antd'
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons'
import {
  getUserListApi,
  getRegionApi,
  addUserApi,
  updateUserApi,
  delUserApi
} from '@/api/user'
import {
  getRolesListApi
} from '@/api/role'
import UserForm from '@/components/user-manage/UserForm'
import { roleObj } from '@/utils/const'

const { confirm } = Modal

export default function UserList() {
  // 数据源，渲染前端
  const [dataSource, setDataSource] = useState([])
  // table加载loading
  const [listLoading, setListLoading] = useState(false)
  // 是否显示增加用户的弹窗
  const [isAddVisible, setIsAddVisible] = useState(false)
  // 角色列表
  const [roleList, setRoleList] = useState([])
  // 区域列表
  const [regionList, setRegionList] = useState([])
  // 是否显示修改用户的弹窗
  const [isUpdateVisible, setIsUpdateVisible] = useState(false)
  // 用户是否被禁用
  const [isUpdateDisable, setIsUpdateDisable] = useState(false)
  // 当前的用户信息
  const [current, setCurrent] = useState(null)
  // ref，用于获取表单数据
  const addForm = useRef(null)
  const updateForm = useRef(null)

  // roleId  1 超级管理员 2 区域 管理员 3 区域编辑
  const { roleId, region, username } = JSON.parse(localStorage.getItem('token'))

  const columns = [
    {
      title: '区域',
      dataIndex: 'region',
      filters: [
        {
          text: '全球',
          value: '全球'
        },
        ...regionList.map(item => {
          return {
            text: item.title,
            value: item.value
          }
        })
      ],
      filterSearch: true,
      onFilter: (value, item) => {
        if (value === '全球') {
          return item.region === ''
        } else {
          return item.region === value
        }
      },
      render: (region) => {
        return <b>{region === '' ? '全球' : region}</b>
      }
    },
    {
      title: '角色名称',
      dataIndex: 'role',
      render: (role) => {
        return role.roleName
      }
    },
    {
      title: '用户名',
      dataIndex: 'username'
    },
    {
      title: '用户名状态',
      dataIndex: 'roleState',
      render: (roleState, item) => {
        return <Switch checked={roleState} disabled={item.default} onChange={() => handleChange(item)}/>
      }
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            <Button disabled={item.default} icon={<EditOutlined/>} onClick={() => handleUpdate(item)} shape="circle" type="primary" />
            &nbsp;&nbsp;
            <Button danger disabled={item.default} icon={<DeleteOutlined/>} onClick={() => confirmMethod(item)} shape="circle"/>
          </div>
        )
      }
    }
  ]

  // 获取渲染数据源
  useEffect(() => {
    getUserList()
    getRoleList()
    getRegionList()
  }, [roleId, region, username])

  // 获取区域列表
  const getRegionList = () => {
    getRegionApi().then(res => {
      setRegionList(res)
    })
  }

  // 获取角色列表
  const getRoleList = () => {
    getRolesListApi().then(res => {
      setRoleList(res)
    })
  }

  // 获取用户列表
  const getUserList = () => {
    setListLoading(true)
    getUserListApi({ '_expand': 'role' }).then(res => {
      setListLoading(false)
      // roleId  1 超级管理员 2 区域管理员 3 区域编辑
      setDataSource(roleObj[roleId] === 'superadmin' ? res : [
        // 如果是超级管理员全部返回
        // 如果是区域管理员只返回自己和自己区域的编辑
        ...res.filter(item => item.username === username),
        ...res.filter(item => item.region === region && roleObj[item.roleId] === 'editor')
      ])
    })
  }

  // 删除弹窗
  const confirmMethod = (item) => {
    confirm({
      title: '系统提示',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      icon: <ExclamationCircleOutlined/>,
      content: '删除后无法恢复,你确定要删除吗?',
      onOk() {
        delUserApi(item.id).then(() => {
          message.success('删除成功')
          getUserList()
        })
      },
      onCancel() {
        // console.log('Cancel');
        console.log('取消删除了')
      }
    })
  }

  // 增加用户点击确定事件
  const addFormOk = () => {
    // 获取表单数据
    addForm.current.validateFields().then(values => {
      addUserApi({
        // 展开数据
        ...values,
        'roleState': true,
        'default': false
      }).then(() => {
        message.success('添加成功')
        getUserList()
        // 重置表单
        addForm.current.resetFields()
        // 关闭增加弹窗
        setIsAddVisible(false)
      })
    })
  }

  // 更新用户当前的状态，是否被禁用
  const handleChange = (item) => {
    item.roleState = !item.roleState
    updateUserApi(item.id, {
      ...item,
      roleState: item.roleState
    }).then(() => {
      message.success('操作成功')
      getUserList()
    })
  }

  // 更新用户点击事件
  const handleUpdate = (item) => {
    // 显示修改弹窗
    setIsUpdateVisible(true)
    // 异步获取当前用户的信息，为了判断区域是否能编辑
    setTimeout(() => {
      if (item.roleId === 1) {
        // 禁用
        setIsUpdateDisable(true)
      } else {
        setIsUpdateDisable(false)
      }
      // 设置当前用户的信息到表单
      updateForm.current.setFieldsValue(item)
    }, 0)
    // 设置当前用户的信息
    setCurrent(item)
  }

  // 修改用户点击确定事件
  const updateFormOk = () => {
    // 获取表单数据
    updateForm.current.validateFields().then(value => {
      updateUserApi(current.id, {
        ...current,
        ...value
      }).then(() => {
        message.success('更新成功')
        getUserList()
        // 设置修改弹窗为不可见
        setIsUpdateVisible(false)
        // 设置是否禁用更新取反
        setIsUpdateDisable(!isUpdateDisable)
      })
    })
  }

  return (
    <div>
      <Button onClick={() => {
        setIsAddVisible(true)
        setTimeout(() => {
          addForm.current.resetFields()
        }, 0)
      }} type={'primary'}>添加用户</Button>
      <Table
        columns={columns}
        dataSource={dataSource}
        loading={listLoading}
        pagination={{ pageSize: 5 }}
        rowKey={(item) => item.id}
      />

      <Modal
        cancelText="取消"
        okText="确定"
        onCancel={() => setIsAddVisible(false)}
        onOk={() => addFormOk()}
        open={isAddVisible}
        title="添加用户">
        <UserForm ref={addForm} regionList={regionList} roleList={roleList}/>
      </Modal>

      <Modal
        cancelText="取消"
        okText="确定"
        onCancel={
          () => {
            setIsUpdateVisible(false)
            setIsUpdateDisable(!isUpdateDisable)
          }
        }
        onOk={() => updateFormOk()}
        open={isUpdateVisible}
        title="更新用户">
        <UserForm isUpdate isUpdateDisable={isUpdateDisable} ref={updateForm} regionList={regionList} roleList={roleList}/>
      </Modal>
    </div>
  )
}

// setIsUpdateDisable(!isUpdateDisable) 有待优化
// form 有待研究
